<!DOCTYPE html>
<html lang="en">
    <?php
        $pageid = 0;
        $rowid = 0;
        
        if (isset($_GET['p']))
            $pageid = $_GET['p'];
        if (isset($_GET['r']))
            $rowid = $_GET['r'];
    ?>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <head>
        <title ></title>
        <link rel="stylesheet" href="../css/jqx.base.css" type="text/css" />

        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../js/jqxcore.js"></script>
        <script type="text/javascript" src="../js/jqxbuttons.js"></script>
        <script type="text/javascript" src="../js/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../js/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../js/jqxlistbox.js"></script>
        <script type="text/javascript" src="../js/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../js/jqxmenu.js"></script>
        <script type="text/javascript" src="../js/jqxgrid.js"></script>
        <script type="text/javascript" src="../js/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../js/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../js/jqxgrid.sort.js"></script> 
        <script type="text/javascript" src="../js/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../js/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../js/jqxdata.js"></script>
        <script type="text/javascript" src="../js/gettheme.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                var pagenumber=0;
                var theme = getTheme();
                var url = "getpackageslist.php";
                var parentsLength = $("#jqxWidget").parents().length;
                if (parentsLength > 3) {
                    url = 'getpackageslist.php';
                }
                // prepare the data
                var source =
                    {
                    datatype: "json",
                    datafields: [
                        {name: 'id' , type: 'int'},
                        {name: 'title'},
                        {name: 'start'},
                        {name: 'end'},
                        {name: 'destination'},
                        {name: 'isspecialoffer'}
                    ],
                    id: 'id',
                    url: url,
                    root: 'data'
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                $("#grdPackage").jqxGrid(
                {
                    width: 750,
                    source: dataAdapter,
                    theme: theme,
                    columnsresize: true,
                    pageable: true,
                    autoheight: true,
                    sortable: true,
                    altrows: true,
                    filterable: true,
                    pagesize: 20,
                    columns: [
                        {text: 'id', dataField: 'id', width: 50},
                        {text: 'Title', columntype: 'textbox', dataField: 'title', width: 200},
                        {text: 'Start', dataField: 'start', width: 100},
                        {text: 'End', dataField: 'end', width: 100},
                        {text: 'Destination', dataField: 'destination', width: 150},
                        {text: 'Special Offer', columntype: 'checkbox', dataField: 'isspecialoffer', width: 100}
                    ]
                });
                
                $("#grdPackage").bind("pagechanged", function (event) {
                    var args = event.args;
                    pagenumber = args.pagenum;
                });
                
                $("#grdPackage").bind("pagesizechanged", function (event) {
                    var args = event.args;
                    pagenumber = args.pagenum;
                });
                
                $('#grdPackage').bind('rowdoubleclick', function (event)
                {
                    var rowindex = $('#grdPackage').jqxGrid('getselectedrowindex');
                    var args = event.args;
                    var rowData = $('#grdPackage').jqxGrid('getRowData', args.rowindex);
                    var id = rowData.id;
                    
                    window.location = 'packageeditor.php?id='+id+'&r='+rowindex+'&p='+pagenumber;
                    //alert('packageeditor.php?id='+id+'&r='+rowindex+'&p='+pagenumber);
                });
                
                $("#grdPackage").bind("bindingcomplete", function (event) {
                    $('#grdPackage').jqxGrid('gotopage',<?php echo $pageid; ?>);
                    $('#grdPackage').jqxGrid('selectrow', <?php echo $rowid; ?>);
                }); 
            });
        </script>
    </head>

    <body>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="grdPackage"></div>
        </div>
    </body>
</html>